<template>
  <div class="afterInvestDel-page app-container">

    <!-- <div class="head2">
      <el-row :gutter="12">
        <el-col :span="8">
          <div class="flex">
            <span style="font-size: 24px;">{{info.classfyName}}</span>
            <div class="fromLine fromLine-mark">
              <div class="label">备注：</div>
              <div class="fromLine-content">
                <el-tooltip popper-class="tit-tip" effect="light" :visible-arrow="false" :open-delay="500" :content="info.mark" placement="top-start">
                  <div class="tof" style="width: 100px;">{{info.mark}}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">投资金额：</div>
            <div class="fromLine-content">{{info.initMoney}} 万元</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">成立日期：</div>
            <div class="fromLine-content">{{info.createdTime | parseTime}}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="margin-top: 12px;">
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">单位净值：</div>
            <div class="fromLine-content fzBig">{{info.classifyNetWorth}}</div><span class="fc9">（{{info.classifyNetWorthTime | parseTime}}）</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">今年以来收益率：</div>
            <div class="fromLine-content">
              <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[0].incomeRate" 
              class="fzBig" :class="info.classifyNetWorthExtendBeans[0].incomeRate>0?'positiveFc':'negativeFc'">
                {{info.classifyNetWorthExtendBeans[0].incomeRate | toFixed2}}%
              </span>
              <span v-else class="fzBig">/</span>
            </div><span class="fc9">（截止至{{info.classifyNetWorthTime | parseTime}}）</span>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">成立以来收益率：</div>
            <div class="fromLine-content">
              <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[7].incomeRate" 
              class="fzBig" :class="info.classifyNetWorthExtendBeans[7].incomeRate>0?'positiveFc':'negativeFc'">
                {{info.classifyNetWorthExtendBeans[7].incomeRate | toFixed2}}%
              </span>
              <span v-else>/</span>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">累计净值：</div>
            <div class="fromLine-content">{{info.classifyNetWorth}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">近3月收益率：</div>
            <div class="fromLine-content">
              <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[2].incomeRate" 
              :class="info.classifyNetWorthExtendBeans[2].incomeRate>0?'positiveFc':'negativeFc'">
                {{info.classifyNetWorthExtendBeans[2].incomeRate | toFixed2}}%
              </span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">年化收益率：</div>
            <div class="fromLine-content">
              <span v-if="info.riskIndicatorsBean"
              :class="info.riskIndicatorsBean.annualizedIncomeRate>0?'positiveFc':'negativeFc'">
                {{info.riskIndicatorsBean.annualizedIncomeRate | toFixed2}}%
              </span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">复权净值：</div>
            <div class="fromLine-content">{{info.classifyNetWorth}}</div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">近6月收益率：</div>
            <div class="fromLine-content">
              <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[3].incomeRate" 
              :class="info.classifyNetWorthExtendBeans[3].incomeRate>0?'positiveFc':'negativeFc'">
                {{info.classifyNetWorthExtendBeans[3].incomeRate | toFixed2}}%
              </span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">夏普比率：</div>
            <div class="fromLine-content">
              <span v-if="info.riskIndicatorsBean">{{info.riskIndicatorsBean.sharpeRate}}</span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="12">
        <el-col :span="8"><div style="height: 22px;"></div></el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">近1年收益率：</div>
            <div class="fromLine-content">
              <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[4].incomeRate" 
              :class="info.classifyNetWorthExtendBeans[4].incomeRate>0?'positiveFc':'negativeFc'">
                {{info.classifyNetWorthExtendBeans[4].incomeRate | toFixed2}}%
              </span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="fromLine">
            <div class="label">最大回撤：</div>
            <div class="fromLine-content">
              <span v-if="info.riskIndicatorsBean">{{info.riskIndicatorsBean.maximumDrawdownRate}}</span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="chunk operation from-alignCenter">
          <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
            <el-form-item label="对比指标：" prop="types">
              <indexSelectTree v-model="dataFrom.types" size="small" :clearable="false" @contrastOptionsObj="contrastOptionsObj"></indexSelectTree>
            </el-form-item>
            <el-form-item style="margin-left: 20px">
              <el-button size="small" type="primary" @click="saveParamsHandle">应用</el-button>
              <el-button size="small" @click="refresh">重置</el-button>
            </el-form-item>
          </el-form>
      </div>

      <div v-show="scrollCard" class="scrollCard from-alignCenter">
        <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
          <el-form-item label="对比指标：" prop="types">
            <indexSelectTree v-model="dataFrom.types" size="small"></indexSelectTree>
          </el-form-item>
          <el-form-item style="margin-left: 20px">
            <el-button size="small" type="primary" @click="saveParamsHandle">应用</el-button>
            <el-button size="small" @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div> -->

    <div class="head3">
      <div class="title">
        {{info.classfyName}}
        <el-tooltip v-if="info.mark" popper-class="tit-tip" :open-delay="500" :content="info.mark" placement="right">
          <i class="el-icon-document fontdoc"></i>
        </el-tooltip>
      </div>
      <div class="head-content flex">
        <div class="left">
          <el-row :gutter="12">
            <el-col :span="8">
              <div class="fromLine">
                <div class="label label-line2">
                  <p>单位净值：</p>
                  <p class="fs12 tip">{{info.classifyNetWorthTime | parseTime}}</p>
                </div>
                <div class="fromLine-content fzBig">{{info.classifyNetWorth}}</div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="fromLine">
                <div class="label label-line2">
                  <p>今年以来收益率：</p>
                  <p class="fs12 tip">截止至{{info.classifyNetWorthTime | parseTime}}</p>
                </div>
                <div class="fromLine-content fzBig">
                  <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[0].incomeRate" 
                  :class="info.classifyNetWorthExtendBeans[0].incomeRate>0?'positiveFc1':'negativeFc1'">
                    {{info.classifyNetWorthExtendBeans[0].incomeRate | toFixed2}}%
                  </span>
                  <span v-else>/</span>
                </div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="fromLine">
                <div class="label label-line2" style="width: 138.69px;text-align: right;">
                  <p>成立以来收益率：</p>
                  <p class="fs12 tip tof">成立日期：{{info.classifyNetWorthBean&&info.classifyNetWorthBean.startDate | parseTime}}</p>
                </div>
                <div class="fromLine-content fzBig">
                  <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[7].incomeRate" 
                  :class="info.classifyNetWorthExtendBeans[7].incomeRate>0?'positiveFc1':'negativeFc1'">
                    {{info.classifyNetWorthExtendBeans[7].incomeRate | toFixed2}}%
                  </span>
                  <span v-else>/</span> 
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="12" style="margin-top: 16px;">
            <el-col :span="8">
              <div class="fromLine">
                <div class="label" style="width: 78.69px;text-align: right;">累计净值：</div>
                <div class="fromLine-content fw">{{info.classifyNetWorth}}</div>
              </div>
            </el-col>
            <el-col :span="7">
              <div class="fromLine">
                <div class="label" style="width: 112px;text-align: right;">近3月收益率：</div>
                <div class="fromLine-content fw">
                  <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[2].incomeRate" 
                  :class="info.classifyNetWorthExtendBeans[2].incomeRate>0?'positiveFc1':'negativeFc1'">
                    {{info.classifyNetWorthExtendBeans[2].incomeRate | toFixed2}}%
                  </span>
                  <span v-else>/</span> 
                </div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="fromLine">
                <div class="label" style="width: 138.69px;text-align: right;">年化收益率：</div>
                <div class="fromLine-content fw">
                  <span v-if="info.riskIndicatorsBean"
                  :class="info.riskIndicatorsBean.annualizedIncomeRate>0?'positiveFc1':'negativeFc1'">
                    {{info.riskIndicatorsBean.annualizedIncomeRate | toFixed2}}%
                  </span>
                  <span v-else>/</span> 
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="12">
        <el-col :span="8">
          <div class="fromLine">
            <div class="label" style="width: 78.69px;text-align: right;">复权净值：</div>
            <div class="fromLine-content fw">{{info.classifyNetWorth}}</div>
          </div>
        </el-col>
        <el-col :span="7">
          <div class="fromLine">
            <div class="label" style="width: 112px;text-align: right;">近6月收益率：</div>
            <div class="fromLine-content fw">
              <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[3].incomeRate" 
              :class="info.classifyNetWorthExtendBeans[3].incomeRate>0?'positiveFc1':'negativeFc1'">
                {{info.classifyNetWorthExtendBeans[3].incomeRate | toFixed2}}%
              </span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="fromLine">
            <div class="label" style="width: 138.69px;text-align: right;">夏普比率：</div>
            <div class="fromLine-content fw">
              <span v-if="info.riskIndicatorsBean">{{info.riskIndicatorsBean.sharpeRate | toFixed2}}</span>
              <span v-else>/</span> 
            </div>
          </div>
        </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="8"><div style="height: 22px;"></div></el-col>
            <el-col :span="7">
              <div class="fromLine">
                <div class="label" style="width: 112px;text-align: right;">近1年收益率：</div>
                <div class="fromLine-content fw">
                  <span v-if="info.classifyNetWorthExtendBeans&&info.classifyNetWorthExtendBeans[4].incomeRate" 
                  :class="info.classifyNetWorthExtendBeans[4].incomeRate>0?'positiveFc1':'negativeFc1'">
                    {{info.classifyNetWorthExtendBeans[4].incomeRate | toFixed2}}%
                  </span>
                  <span v-else>/</span> 
                </div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="fromLine">
                <div class="label" style="width: 138.69px;text-align: right;">最大回撤：</div>
                <div class="fromLine-content fw">
                  <span v-if="info.riskIndicatorsBean">{{info.riskIndicatorsBean.maximumDrawdownRate}}</span>
                  <span v-else>/</span> 
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="right">
          <div class="fromLine">
            <div class="label label-line2">
              <p>投资金额：</p>
              <p class="fs12 tip tof">单位：万元</p>
            </div>
            <div class="fromLine-content fzBig">{{info.initMoney}}</div>
          </div>
          <div class="fromLine" style="margin-top: 15px;">
            <div class="label">创建日期：</div>
            <div class="fromLine-content fw">{{info.classifyNetWorthBean&&info.classifyNetWorthBean.startDate | parseTime}}</div>
          </div>
        </div>
      </div>
    </div>

     <div class="chunk operation from-alignCenter">
        <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
          <el-form-item label="对比指标：" prop="types">
            <indexSelectTree v-model="dataFrom.types" size="small" :clearable="false" @contrastOptionsObj="contrastOptionsObj" :width="300"></indexSelectTree>
          </el-form-item>
          <el-form-item style="margin-left: 20px">
            <el-button size="small" type="primary" @click="saveParamsHandle">应用</el-button>
            <el-button size="small" @click="refresh">重置</el-button>
          </el-form-item>
        </el-form>
    </div>

    <div v-show="scrollCard" class="scrollCard from-alignCenter">
      <el-form ref="dataFrom" :inline="true" label-width="82px" :model="dataFrom">
        <el-form-item label="对比指标：" prop="types">
          <indexSelectTree v-model="dataFrom.types" size="small" :width="300"></indexSelectTree>
        </el-form-item>
        <el-form-item style="margin-left: 20px">
          <el-button size="small" type="primary" @click="saveParamsHandle">应用</el-button>
          <el-button size="small" @click="refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="content">

      <div class="column">
        <span>历史走势图</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk1}" @click="showChunk1=!showChunk1" />
      </div>
      <div v-show="showChunk1" class="showChunk">
        <chart1Head :more_chart1_nav_list2="more_chart1_nav_list2" :chartDate.sync="chart_date" :oldDate="oldDate" @sameSection="sameSectionHandle"></chart1Head>
        <Chart1 v-if="classifyId&&Object.keys(contrastOptions_obj).length&&dataFrom.types.length&&info.classfyName" :contrastOptions_obj="contrastOptions_obj" id="groupManageChart1" 
        :userId="userId" :ids="classifyId" :id_index="dataFrom.types" :chart_date="chart_date" :sameSection="sameSection"
        :name1="info.classfyName" :name2="info.classfyName" typePage="groupManage" :height="280" width="100%" />
        <div v-else style="height:585px;"></div>
      </div>

      <div class="column">
        <span>收益风险指标</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk2}" @click="showChunk2=!showChunk2" />
      </div>
      <div v-show="showChunk2" class="showChunk">
        <el-table
          v-loading="listLoading_riskIndicators"
          :data="list_riskIndicators"
          fit default-expand-all
          row-key="rowKey"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          size="mini"
          style="width: 100%;margin-top:20px"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
        >
          <el-table-column prop="name" label="名称" min-width="100" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span v-if="row.strategyId&&row.hasNetWorth" v-strategy="{id: row.strategyId, userId}">{{ row.name }}</span>
              <span v-else style="cursor: pointer;color: #666;" @click.stop="$message('该策略净值不存在，无法查看详情')">{{ row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="initialMoney" label="投资金额" align="center">
            <template slot-scope="{row}">
              <span v-if="row.initialMoney">{{ row.initialMoney }}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="weight" label="权重" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.weight">{{scope.row.weight}}%</span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[7].incomeRate" label="收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[7]&&row.netWorthExtendBeanList[7].incomeRate" :class="row.netWorthExtendBeanList[7].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[7].incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="annualizedIncomeRate" label="年化收益率" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.annualizedIncomeRate" :class="scope.row.annualizedIncomeRate>=0?'positiveFc':'negativeFc'">
                {{scope.row.annualizedIncomeRate}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[1].incomeRate" label="近1个月收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[1]&&row.netWorthExtendBeanList[1].incomeRate" :class="row.netWorthExtendBeanList[1].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[1].incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[2].incomeRate" label="近3个月收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[2]&&row.netWorthExtendBeanList[2].incomeRate" :class="row.netWorthExtendBeanList[2].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[2].incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[3].incomeRate" label="近6个月收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[3]&&row.netWorthExtendBeanList[3].incomeRate" :class="row.netWorthExtendBeanList[3].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[3].incomeRate | toFixed2 }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[4].incomeRate" label="近1年收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[4]&&row.netWorthExtendBeanList[4].incomeRate" :class="row.netWorthExtendBeanList[4].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[4].incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[5].incomeRate" label="近2年收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[5]&&row.netWorthExtendBeanList[5].incomeRate" :class="row.netWorthExtendBeanList[5].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[5].incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="netWorthExtendBeanList[6].incomeRate" label="近3年收益率" min-width="100" align="center">
            <template slot-scope="{row}">
              <span v-if="row.netWorthExtendBeanList&&row.netWorthExtendBeanList[6]&&row.netWorthExtendBeanList[6].incomeRate" :class="row.netWorthExtendBeanList[6].incomeRate>=0?'positiveFc':'negativeFc'">
                {{ row.netWorthExtendBeanList[6].incomeRate }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="annualFluctuationsRate" label="年化波动率" align="center"></el-table-column>
          <el-table-column prop="sharpeRate" label="夏普比率" align="center"></el-table-column>
          <el-table-column prop="maximumDrawdownRate" label="最大回撤" align="center"></el-table-column>
          <el-table-column prop="calmarRate" label="卡玛比率" align="center"></el-table-column>
          <el-table-column prop="maxBackIncomDay" label="最大回补天数" min-width="92" align="center"></el-table-column>
          <el-table-column prop="investWinningRate" label="投资胜率" align="center"></el-table-column>
        </el-table>
      </div>

      <div class="column">
        <span>历史月度表现</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk4}" @click="showChunk4=!showChunk4" />
      </div>
      <div v-show="showChunk4" class="showChunk">
        <div class="line" style="margin-top: 20px;">
          <div class="showMonth">
            <div class="round round1"></div>
            {{ info.classfyName }}
          </div>
          <div class="showMonth">
            <div class="round round2"></div>
            <el-select style="width: 130px;" v-model="month_contrast" size="mini" clearable placeholder="请选择" @change="monthContrastHandle">
              <el-option
                v-for="item in one_contrastOptions_list"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_showMonth"
          stripe fit
          size="mini"
          :cell-class-name="showMonthTableClassName"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column prop="0.year" label="年份" width="100" align="center">
            <template slot-scope="{row}">
              <showMonthOpen v-if="row[12].classifyId" ref="showMonthOpen" :type="2" :id="classifyId" :monthlyIndexData="monthlyIndexData" 
              :year="row[0].year" :indexName="name_contrast" :row="row" :rowName="info.classfyName"></showMonthOpen>
              <div v-else style="cursor: default;">{{row[0].year}}</div>
            </template>
          </el-table-column>
          <el-table-column :prop="`${i-1+''}`" :label="`${i}月`" align="center" v-for="i in 12" :key="i">
            <template slot-scope="scope">
              <span v-if="scope.row[i-1].growthRate!=null" :class="scope.row[i-1].growthRate>=0?'positiveFc':'negativeFc'">
                {{scope.row[i-1].growthRate}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column prop="12.growthRate" label="YTD" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row[12].growthRate!=null" :class="scope.row[12].growthRate>=0?'positiveFc':'negativeFc'">
                {{scope.row[12].growthRate}}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="line" style="margin-top: 20px;">
          <el-button-group>
            <el-button size="small" :type="monthChartBtn?'':'primary'" @click="monthChartBtn=0">月度回报</el-button>
            <el-button size="small" :type="monthChartBtn?'primary':''" @click="monthChartBtn=1">收益分布</el-button>
          </el-button-group>
        </div>
        <div class="month-chartContent">
          <div class="mChunk1">
            <showmonth-chart v-if="info.classfyName&&monthChartBtn" id="showmonthChart" :date="chart_date" :name_contrast="name_contrast" :month_contrast="month_contrast" :y-name="info.classfyName" :data="list_monthNetWorthLine" height="350px" width="100%" />
            <month-return-chart v-else-if="info.classfyName&&(!monthChartBtn)" id="monthReturnChart" :name_contrast="name_contrast" :month_contrast="month_contrast" :y-name="info.classfyName" :data="list_monthNetWorthDistributed" :height="400" width="100%" />
          </div>
          <div class="mChunk2">
            <el-table
              v-if="info.classfyName&&monthChartBtn"
              v-loading="findNetWorthExtendByStrategyId2_loading"
              :data="list_showMonth_profit"
              stripe fit
              size="mini"
              :cell-style="{padding: '6px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;margin-top:20px"
              :key="list_showMonth_key"
            >
              <el-table-column prop="" label="" align="center">
                <template slot-scope="scope">
                  <span>{{list_showMonth_profit_column1[scope.$index].name}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="1" :label="info.classfyName" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.incomeRate" :class="scope.row.incomeRate>0?'positiveFc':'negativeFc'">{{ scope.row.incomeRate }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="2" :label="name_contrast" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.growth" :class="scope.row.growth>0?'positiveFc':'negativeFc'">{{ scope.row.growth }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
            <el-table
              v-show="info.classfyName&&(!monthChartBtn)"
              v-loading="getMonthNetWorthDetial_loading"
              :data="list_table_getMonthNetWorthDetial"
              stripe fit
              size="mini"
              :cell-style="{padding: '6px 0'}"
              :header-cell-style="{background:'#dcedff',color:'#32639d'}"
              style="width: 100%;margin-top:20px"
            >
              <el-table-column prop="date" label="净值日期" align="center"></el-table-column>
              <el-table-column prop="netWorthMonth" label="单位净值" align="center"></el-table-column>
              <el-table-column prop="netWorthRestorationMonth" label="累计净值" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.netWorthRestorationMonth"><span style="color:#F00;">*</span>{{ scope.row.netWorthRestorationMonth }}</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
              <el-table-column prop="monthIncrease" label="月涨跌幅" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.monthIncrease&&scope.row.monthIncrease!=0" :class="scope.row.monthIncrease>0?'positiveFc':'negativeFc'">{{ scope.row.monthIncrease }}%</span>
                  <span v-else>--</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="monthNetWorthDetial_total>0&&info.classfyName&&(!monthChartBtn)" style="padding-bottom: 0;" 
              :small="true"
              :pager-count="5"
              layout="total, prev, pager, next, jumper"
              :total="monthNetWorthDetial_total" 
              :page.sync="monthNetWorthDetial_listQuery.pageCurrent" 
              :limit.sync="monthNetWorthDetial_listQuery.limit" @pagination="getMonthNetWorthDetial" 
            />
          </div>
        </div>
      </div>

      <div class="column">
        <span>历史净值</span>
        <i class="el-icon el-icon-d-arrow-right" :class="{'openChunk': showChunk3}" @click="showChunk3=!showChunk3" />
      </div>
      <div v-show="showChunk3" class="showChunk">
        <el-table
          v-loading="listLoading_netWorth"
          :data="list_netWorth"
          stripe fit
          size="mini"
          :cell-style="{padding: '8px 0'}"
          :header-cell-style="{background:'#dcedff',color:'#32639d'}"
          style="width: 100%;margin-top:20px"
        >
          <el-table-column type="index" label="序号" align="center" width="60"></el-table-column>
          <!-- <el-table-column prop="classifyName" label="分类名称" align="center" min-width="180" show-overflow-tooltip></el-table-column> -->
          <el-table-column prop="networthTime" label="净值日期" align="center" min-width="100">
            <template slot-scope="{row}">
              <span>{{ row.networthTime | parseTime }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="networthValue" label="单位净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="networthValue" label="累计净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="networthValue" label="复权累计净值" align="center" min-width="100"></el-table-column>
          <el-table-column prop="pnl" label="涨跌幅" align="center" min-width="100">
            <template slot-scope="{row}">
              <span v-if="row.pnl!=null" :class="row.pnl>=0?'positiveFc':'negativeFc'">
                {{ row.pnl }}%
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
        </el-table>
        <pagination v-if="total_netWorth>0" style="padding-bottom: 0;" :total="total_netWorth" :page.sync="listQuery.pageCurrent" :limit.sync="listQuery.limit" @pagination="classClassifyHistory" />
      </div>

    </div>

    <div style="height:200px;"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getClassifyHeadDetail, getClassRiskRateByClassifyId, classClassifyHistory, findClassifyNetWorthMonthly, getStrategyClassifyExt,
  findClassifyNetWorthExtendBySegment, findClassifyNetWorthMonthlyHistogram, findClassifyNetWorthMonthDistribute, findClassifyNetWorthMonthDetailByPage } from '@/api/groupManage'
import { getIndexRiskByIndexTypeAndTime, getMonthlyIndex, findTimeScopeGrowth } from '@/api/policyManage'
import indexSelectTree from '@/components/investComn/indexSelectTree.vue'
import showmonthChart from '@/components/Charts/lineEcharts_netWorthShowMonth1.vue'
import monthReturnChart from '@/components/Charts/barEcharts_monthReturn.vue'
import Chart1 from '@/components/Charts/strategyComb/groupManage/chart1.vue'
import chart1Head from '@/components/investComn/chart1Head.vue'
import showMonthOpen from '@/views/other/showMonthOpen.vue'
import Pagination from '@/components/Pagination'
import { parseTime, deepClone } from '@/utils'

export default {
  name: 'StrategyCombDetails',
  components: { indexSelectTree, Chart1, Pagination, showmonthChart, monthReturnChart, showMonthOpen, chart1Head },
  data() {
    return {
      active: 1,
      listLoading1: false,
      list1: [],
      monthlyIndexData: {},

      chart_date: [],
      oldDate: [],
      more_chart1_nav_list2: [],
      dataFrom: {
        types: []
      },
      classifyId: '',
      info: {},
      start_date: '',
      sameSection: false,

      scrollCard: false,

      showChunk1: true,

      showChunk2: true,
      listLoading_riskIndicators: false,
      list_riskIndicators: [], // 收益风险指标
      _list_riskIndicators: [], // 保存基础 收益风险指标
      riskIndicators_columnLabel: {
        'annualizedIncomeRate': '年化收益',
        'annualFluctuationsRate': '年化波动',
        'sharpeRate': '夏普比率',
        'maximumDrawdownRate': '最大回撤',
        'calmarRate': '卡玛比率',
        'maxBackIncomDay': '最大回补天数',
        'investWinningRate': '投资胜率',
      },
      add_column_list: [],

      showChunk3: true,
      listLoading_netWorth: false,
      listQuery: {
        pageCurrent: 1,
        limit: 10
      },
      list_netWorth: [], //历史净值
      total_netWorth: 0,

      showChunk4: true,
      one_contrastOptions_list: [],
      contrastOptions_obj: {},
      listLoading_monthNetWorth: false,
      month_contrast: undefined,
      name_contrast: '',
      list_showMonth: [],
      _list_showMonth: [],
      monthChartBtn: 0,
      list_showMonth_profit: [],
      list_showMonth_key: 0,
      list_showMonth_profit_column1: [
        { id: 99, name: '成立以来' },
        { id: 0, name: '今年以来' },
        { id: 1, name: '近1月' },
        { id: 3, name: '近3月' },
        { id: 6, name: '近6月' },
        { id: 12, name: '近1年' },
        { id: 24, name: '近2年' },
        { id: 36, name: '近3年' },
      ],
      list_monthNetWorthLine: [], // 收益分布
      findNetWorthExtendByStrategyId2_loading: false, // 收益分布 列表loading
      list_monthNetWorthDistributed: [], // 月度回报 echart
      list_table_getMonthNetWorthDetial: [], // 月度回报 列表
      getMonthNetWorthDetial_loading: false, // 月度回报 列表loading
      monthNetWorthDetial_listQuery: { // 月度回报 分页
        pageCurrent: 1,
        limit: 10
      },
      monthNetWorthDetial_total: 0,

      showChunk5: true,
      listLoading: false,
      strategyPortfolioDetials: [], 
      netWorthDetialBeanList: [], // 子策略数据

    }
  },
  computed: {
    ...mapGetters(['userId']),
  },
  watch: {
    'dataFrom.types': {
      handler(newVal, oldVal) {
        if(newVal.length > 5) {
          this.$message({
            message: '最多选择5个对比指标',
            type: 'warning',
            duration: 2000
          })
          this.$nextTick(() => {
            this.dataFrom.types = oldVal
          })
        }
        if(Object.keys(this.contrastOptions_obj).length) {
          this.one_contrastOptions_list = []
          newVal.forEach(item => {
            this.one_contrastOptions_list.push({
              id: item,
              name: this.contrastOptions_obj[item]
            })
          })
          // this.month_contrast = newVal[0]
          // if(this.chart_date.length&&newVal.toString()!=oldVal.toString()) {
          //   this.monthContrastHandle(newVal[0])
          // }
        }
      },
      deep: true
    },
    month_contrast(val) {
      if(val) {
        this.name_contrast = this.contrastOptions_obj[val] // 月度表现头部修改
      }
    }
  },
  created() {
    this.classifyId = this.$route.params && this.$route.params.id  // 多开标签
    // this.classifyId = this.$route.query.id
    this.classClassifyHistory(this.classifyId)
    this.getMonthNetWorth(this.classifyId)
    this.findNetWorthExtendByStrategyId2(this.classifyId)
    this.getMonthNetWorthLine(this.classifyId)
    this.getMonthNetWorthDistributed(this.classifyId)
    this.getMonthNetWorthDetial(this.classifyId)

    window.addEventListener('scroll', this.watchScroll)
  },
  methods: {
    sameSectionHandle(val) {
      this.sameSection = val
    },
    watchScroll() {
      if(document.documentElement.scrollTop >= 300) {
        this.scrollCard = true
      }else {
        this.scrollCard = false
      }
    },
    contrastOptionsObj(obj) {
      this.contrastOptions_obj = obj
      this.getClassifyHeadDetail(this.classifyId)
    },
    saveParamsHandle() {
      this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
    },
    refresh() {
      this.$refs['dataFrom'].resetFields()
    },
    getClassifyHeadDetail(classifyId) {
      this.listLoading1 = true
      getClassifyHeadDetail({
        classifyId
      }).then(res => {
        this.listLoading1 = false
        console.log('详情', res)

        // 多开标签 设置
        this.tempRoute = Object.assign({}, this.$route)
        this.$setTagsViewTitle(this.tempRoute, `净值分析[策略分类]-${res.body.classfyName}`)
        document.title = `净值分析[策略分类]-${res.body.classfyName}`

        this.info = res.body
        this.dataFrom.types = [res.body.indexType]
        // this.month_contrast = this.dataFrom.types[0]
        const dates = []
        dates[0] = parseTime(res.body.classifyNetWorthBean.startDate)
        dates[1] = res.body.classifyNetWorthBean.endDate ? parseTime(res.body.classifyNetWorthBean.endDate) : parseTime(new Date())
        this.chart_date = dates
        this.oldDate = deepClone(dates)
        let year0 = Number(this.chart_date[0].slice(0, 4))
        const year1 = Number(this.chart_date[1].slice(0, 4))
        this.more_chart1_nav_list2 = []
        while (year0<=year1) {
          this.more_chart1_nav_list2.push(year0+'年度')
          year0++
        }
        this.getriskIndicators()
      })
    },
    getStrategyClassifyExt(classifyId) {
      this.listLoading = true
      getStrategyClassifyExt({
        classifyId
      }).then(res => {
        console.log('策略列表', res)
        this.listLoading = false
        res.body.map((item, i) => {
          item.rowKey = i+2
          item.name = item.strategyName
          item = Object.assign(item, item.riskIndicatorsBean)
        })
        this.strategyPortfolioDetials = res.body
        this.$set(this.list_riskIndicators[0], 'children', res.body)
      })
    },
    showMonthTableClassName({ row, columnIndex }) {
      if(columnIndex === 0) {
        if(row[12].classifyId) {
          return 'showMonthyearBorder0'
        }else {
          return 'showMonthyearBorder1'
        }
      }
    },
    tableRowClassName({ columnIndex }) {
      if (columnIndex === 0) {
        return 'title-row'
      } else if (columnIndex === 1) {
        return 'cell-row-0'
      } else if (columnIndex === 2) {
        return 'cell-row-1'
      } else if (columnIndex === 3) {
        return 'cell-row-2'
      } else if (columnIndex === 4) {
        return 'cell-row-3'
      } else if (columnIndex === 5) {
        return 'cell-row-4'
      } else if (columnIndex === 6) {
        return 'cell-row-5'
      } else if (columnIndex === 7) {
        return 'cell-row-6'
      }
      return ''
    },
    titleHandle(i) {
      const key_list = Object.keys(this.riskIndicators_columnLabel)
      return this.riskIndicators_columnLabel[key_list[i]]
    },
    // 收益风险指标
    getriskIndicators() {
      this.listLoading_riskIndicators = true
      getClassRiskRateByClassifyId({
        classifyId: this.classifyId,
        userId: this.userId
      }).then(res => {
        console.log('风险指标', res)
        this.list_riskIndicators[0] = res.body
        this.list_riskIndicators[0].name = this.info.classfyName
        this.list_riskIndicators[0].rowKey = 1
        this.list_riskIndicators[0].netWorthExtendBeanList = res.body.classifyNetWorthExtendBeans
        this.getStrategyClassifyExt(this.classifyId)
        this.getIndexRiskByIndexTypeAndTime(this.dataFrom.types)
      })
    },
    // 收益风险指标 指数
    getIndexRiskByIndexTypeAndTime(indexType) {
      getIndexRiskByIndexTypeAndTime({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('风险指标 指数', res)
        this.listLoading_riskIndicators = false
        this.listLoading_riskIndicators = false
        this.list_riskIndicators = [this.list_riskIndicators[0]]
        Object.keys(res.body).forEach(index => {
          const name = this.contrastOptions_obj[index]
          this.list_riskIndicators.push({
            name,
            rowKey: index+10000,
            netWorthExtendBeanList: res.body[index].scopeIndexVos,
            ...res.body[index]
          })
        })
      })
    },
    loadChildTable(row, treeNode, resolve) {
      if(this.strategyPortfolioDetials.length>0) {
        resolve(this.strategyPortfolioDetials)
      }else {
        setTimeout(() => {
          resolve(this.strategyPortfolioDetials)
        }, 200)
      }
    },
    // 历史净值
    classClassifyHistory() {
      this.listLoading_netWorth = true
      classClassifyHistory({
        classifyId: this.classifyId,
        ...this.listQuery,
        userId: this.userId
      }).then(res => {
        this.listLoading_netWorth = false
        console.log('历史净值', res)
        this.list_netWorth = res.body.list
        this.total_netWorth = res.body.total
      })
    },
    // 历史月度表现
    getMonthNetWorth(classifyId) {
      this.listLoading_monthNetWorth = true
      findClassifyNetWorthMonthly({
        classifyId,
        userId: this.userId
      }).then(res => {
        this.listLoading_monthNetWorth = false
        this.monthlyIndexData = res.body
        const list = Object.keys(res.body).map(function(i) { return res.body[i] })
        const new_list = deepClone(list)
        console.log('历史月度表现', list)
        list.forEach((items, index) => {
          items.map((el, j) => {
            el.growthRate = Number(el.monthIncrease)
            new_list[index][j].growthRate = Number(el.monthIncrease)
          })
          if(items.length<13) {
            new_list[index] = []
            const year = items[0].year
            for(let i=0; i<13; i++) {
              if(items[i]&&items[i].month != i+1) {
                if(!new_list[index][i]) {
                  new_list[index][i] = {
                    year: items[i].year
                  }
                }
                new_list[index][items[i].month-1] = deepClone(items[i])
              }else if(!new_list[index][i]) {
                if(items[i]&&items[i].month == i+1) {
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else {
                  new_list[index][i] = {
                    year
                  }
                }
              }
            }
          }
        })
        this.list_showMonth = new_list
        this._list_showMonth = deepClone(new_list)
        console.log('历史月度表现 修改........', this.list_showMonth)
      })
    },
    // 指数月度表现
    monthContrastHandle(indexType) {
      if(indexType) {
        if(this.month_contrast) this.findTimeScopeGrowth(this.month_contrast)
        getMonthlyIndex({
          indexType,
          startTime: this.chart_date[0],
          endTime: this.chart_date[1]
        }).then(res => {
          console.log('指数月度表现', res)
          Object.keys(res.body).forEach(key => {
            const items = res.body[key]
            items.forEach(item => {
              if(item.indexTime) {
                item.month = Number(item.indexTime.slice(5))
              }else {
                item.month = 13
              }
              item.growthRate = item.indexGrowthRate==null ? null : Number(item.indexGrowthRate)
            })
          })
          const list = Object.keys(res.body).map(function(i) { return res.body[i] })
          const new_list = deepClone(list)
          list.forEach((items, index) => {
            if(items.length<13) {
              new_list[index] = []
              const year = items[0].year
              for(let i=0; i<13; i++) {
                if(items[i]&&items[i].month != i+1) {
                  if(!new_list[index][i]) {
                    new_list[index][i] = {
                      year: items[i].year
                    }
                  }
                  new_list[index][items[i].month-1] = deepClone(items[i])
                }else if(!new_list[index][i]) {
                  if(items[i]&&items[i].month == i+1) {
                    new_list[index][items[i].month-1] = deepClone(items[i])
                  }else {
                    new_list[index][i] = {
                      year
                    }
                  }
                }
              }
            }
          })
          this.list_showMonth = deepClone(this._list_showMonth)
          const save_list_showMonth = deepClone(this._list_showMonth)

          if(new_list.length>this.list_showMonth) {
            new_list.forEach(element => {
              this.list_showMonth.forEach((item, i) => {
                if(element[0].year == item[0].year) {
                  save_list_showMonth.splice(i+1, 0, element)
                }
              })
            })
          }else {
            let num = 0 // 插入之后_list_showMonth数组变长，需计数
            this.list_showMonth.forEach((element, n) => {
              new_list.forEach((item, i) => {
                if(element[0].year == item[0].year) {
                  save_list_showMonth.splice(n+1+num, 0, item)
                  num++
                }
              })
            })
          }
          this.list_showMonth = deepClone(save_list_showMonth)
        })
      }else {
        this.name_contrast = ''
        this.month_contrast = undefined
        this.list_showMonth = [] // 月度表现列表数据
        this.list_showMonth_profit = [] // 收益分布列表数据
        this.getMonthNetWorth(this.classifyId)
        this.findNetWorthExtendByStrategyId2(this.classifyId)
      }
    },
    // 收益分布 列表
    findNetWorthExtendByStrategyId2(classifyId) {
      this.findNetWorthExtendByStrategyId2_loading = true
      findClassifyNetWorthExtendBySegment({
        classifyId,
        userId: this.userId
      }).then(res => {
        console.log('收益分布 列表', res)
        this.findNetWorthExtendByStrategyId2_loading = false
        this.headTail(res.body)
        this.list_showMonth_profit = res.body
      })
    },
    // 收益分布 列表 指数
    findTimeScopeGrowth(indexType) {
      findTimeScopeGrowth({
        indexType,
        startTime: this.chart_date[0],
        endTime: this.chart_date[1],
      }).then(res => {
        console.log('对比指数 收益分布 列表', res)
        this.headTail(res.body)
        this.list_showMonth_profit.forEach((item, i) => {
          item.growth = res.body[i].growth
        })
        this.list_showMonth_key++
      })
    },
    headTail(list) {
      list.unshift(list[list.length-1])
      list.splice(list.length-1, 1)
    },
    // 收益分布 柱状图
    getMonthNetWorthLine(classifyId) {
      findClassifyNetWorthMonthlyHistogram({
        classifyId,
        userId: this.userId
      }).then(res => {
        console.log('收益分布', res)
        this.list_monthNetWorthLine = res.body
      })
    },
    // 月度回报
    getMonthNetWorthDistributed(classifyId) {
      findClassifyNetWorthMonthDistribute({
        classifyId,
        userId: this.userId
      }).then(res => {
        console.log('月度回报', res)
        this.list_monthNetWorthDistributed = res.body
      })
    },
    // 月度回报 列表
    getMonthNetWorthDetial(classifyId) {
      this.getMonthNetWorthDetial_loading = true
      findClassifyNetWorthMonthDetailByPage({
        classifyId,
        userId: this.userId,
        ...this.monthNetWorthDetial_listQuery
      }).then(res => {
        console.log('月度回报 列表', res)
        this.getMonthNetWorthDetial_loading = false
        this.list_table_getMonthNetWorthDetial = res.body.list
        this.monthNetWorthDetial_total = res.body.total
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.afterInvestDel-page {
  position: relative;
  .head2 {
    border: 1px solid #e1e0e0;
    padding: 15px;
    .fromLine {
      display: flex;
      line-height: 22px;
      .label { min-width: 0px; }
      .fromLine-content { min-width: 0; }
    }
    .fromLine-mark {
      display: flex;
      align-items: flex-end;
      line-height: normal;
      .label { width: 55px; min-width: 55px; text-align: right; }
    }
    .fzBig { font-size: 22px; font-weight: bold; }
    .fc9 { color: #666; }
    .flex {
      display: flex;
    }
    .from-alignCenter {
      ::v-deep .el-tag {
        margin-top: 4px;
      }
    }
  }
  .head {
    padding: 15px 15px 0;
    border: 1px solid #e1e0e0;
    font-size: 14px;
    .redFont { color: #c00; }
    .fromLine {
      display: flex;
      line-height: 24px;
      .label { width: 80px; text-align: right; }
      // .fromLine-content {}
    }
    .chunk {
      display: flex;
      > div:nth-of-type(1) { width: 28%; }
      > div:nth-of-type(2) { width: 22%; }
      > div:nth-of-type(3) { width: 22%; }
      > div:nth-of-type(4) { width: 28%; }
      .chunk-strategyType { 
        width: 100% !important; height: 100%;
        display: flex;
        > div { flex: 1; }
        > div + div {
          border-left: 1px dashed #e1e0e0;
          margin-left: 20px;
        }
        .netWorth-strategyType {
          justify-content: space-around;
        }
      }
      .history-strategyType {
        div {
          display: flex;align-items: center;
          .label {
            justify-content: flex-end;
          }
        }
        & + .history-strategyType {
          margin-left: 20px;
        }
      }
    }
    .chunk + .chunk { border-top: 1px dashed #e1e0e0; }
    .title {
      height: 84px;
      .product {
        h3 {font-size: 22px;}
        .tips {
          margin-top: 30px;
          .tip {
            border: 1px solid #3D71AE;
            color: #3D71AE;
            padding: 3px 6px;
            & + .tip { margin-left: 6px; }
          }
        }
      }
    }
    .title-center { line-height: 35px; }
    .data {
      height: 114px;
      padding: 10px 0;
      > div + div {
        border-left: 1px dashed #e1e0e0;
        margin-left: 20px;
      }
      .netWorth {
        display: flex;
        justify-content: space-between;
        .label { width: 100px; text-align: right; }
        .netWorth1 { 
          display: flex; flex-direction: column; justify-content: center; align-items: center; 
          .num { font-size: 32px; line-height: 38px; color: #c00; }
        }
        .netWorth2 { display: flex; flex-direction: column; justify-content: center; align-items: center; div { line-height: 36px; } }
      }
      .profit, .history {
        > div {line-height: 32px;}
        > div {
          display: flex; justify-content: space-around;
          span {width: 33.33%;text-align: center;}
        }
        .h-d3 {
          span { min-width: 80px; }
        }
      }
      .other {
        display: flex;
        > div {display: flex; flex-direction: column; justify-content: space-around;}
      }
    }
    .operation {
      height: 80px;
      display: flex;
      align-items: center;
    }
  }
  .scrollCard {
    width: calc(100% - #{$sideBarWidth} - 40px);
    height: 80px;
    font-size: 14px;
    background: #FFF;
    z-index: 668;
    border: 1px solid #e1e0e0;
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    padding-left: 15px;
  }
  .from-alignCenter {
    ::v-deep .el-form{
      .el-form-item { margin-bottom: 0; }
    }
  }
  .content {
    .column {
      font-size: 18px;
      font-weight: bold;
      display: flex;
      align-items: center;
      margin-top: 30px;
      cursor: pointer;
      user-select: none;
      .el-icon { color: #4F95DD; font-weight: bold; margin-left: 6px; }
      .openChunk { transform: rotate(90deg); }
      &::before {
        display: inline-block;
        content: '';
        width: 6px;
        height: 26px;
        background: #42b983;
        margin-right: 6px;
      }
    }
  }
  .line {
    display: flex;
    .showMonth {
      display: flex;
      align-items: center;
      & + .showMonth {margin-left: 15px;}
      .round {width: 10px;height: 10px;border-radius: 50%;margin-right: 5px;}
      .round1 {background: #e16757;}
      .round2 {background: #78b2eb;}
    }
  }
  .month-chartContent {
    display: flex;
    .mChunk1 {width: 65%;}
    .mChunk2 {width: 35%;}
  }

  .operation {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
}
</style>

